<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff"  isBack="true">
			<block slot="content">支付订单</block> 
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="l_bg" style="width: 710rpx;margin-top: 30rpx;">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="order_details_a">
									<view class="order_details_a_a">
										<price-format :first-size="46" :second-size="32" :subscript-size="32" :price="amount" :weight="500"></price-format>
									</view>
									<view class="order_details_a_b" v-if="timeout>0">
										<u-count-down
													:time="timeout"
													format="HH:mm:ss"
													autoStart
													millisecond
													@finish="countDownFinish"
													@change="onDownChange"
										>
											<view class="order_details_a_b_a">
												<text class="order_details_a_b_a_a">支付剩余时间  </text>
												<text class="order_details_a_b_a_a">{{ timeData.minutes }}分</text>
												<text class="order_details_a_b_a_a">{{ timeData.seconds }}秒</text>
											</view>
										</u-count-down>
									</view>
								</view>
							</view>
						</view>	
					</view>	
				</view>	
			</view>
			<view class="l_bg" style="width: 710rpx;margin-top: 30rpx;">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="user_pay_b">
									<view class="user_pay_b_b">选择支付方式</view>
									<view class="user_pay_b_a" :class="is_pay==1?'user_pay_b_aa':''" @click="pay_click(1)">
										<view class="user_pay_b_a_a" :style="'background-image:url('+(wx)+');'">微信</view>
										<view class="user_pay_b_a_b" :class="is_pay==1?'user_pay_b_a_bb':''" :style="'background-image:url('+xuanzhong+');'"></view>
									</view>
									<view class="user_pay_b_a" v-if="from=='order' || from=='vip' || from=='curriculum'|| from=='test'" :class="is_pay==3?'user_pay_b_aa':''" @click="pay_click(3)">
										<view class="user_pay_b_a_a" :style="'background-image:url('+(yue)+');'">
											<view class="user_pay_b_a_a_a">余额抵扣</view>
											<view class="user_pay_b_a_a_b">可用余额{{user_info.user_money}}元</view>
										</view>
										<view class="user_pay_b_a_b" :class="is_pay==3?'user_pay_b_a_bb':''" :style="'background-image:url('+xuanzhong+');'"></view>
									</view>
									<view class="user_pay_b_a" v-if="from=='recharge'" :class="is_pay==2?'user_pay_b_aa':''" @click="pay_click(2)" style="border-bottom:0">
										<view class="user_pay_b_a_a" :style="'background-image:url('+(tuandui_pay)+');'">
											<view class="user_pay_b_a_a_a">佣金抵扣</view>
											<view class="user_pay_b_a_a_b">可用佣金{{user_info.earnings}}元</view>
										</view>
										<view class="user_pay_b_a_b" :class="is_pay==2?'user_pay_b_a_bb':''" :style="'background-image:url('+xuanzhong+');'"></view>
									</view>
								</view>
							</view>
						</view>	
					</view>	
				</view>	
			</view>	
			<view class="user_pay_c" v-if="timeout>0"><!-- //&&  -->
				<view class="user_pay_c_a" @click="pay_post()">确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			xuanzhong:request.baseUrl_img+'/img/xuanzhong.png',
			wx:request.baseUrl_img+'/img/wx.png',
			yue:request.baseUrl_img+'/img/yue.png',
			tuandui_pay:request.baseUrl_img+'/img/tuandui_pay.png',
			is_pay:1,
			timeout: 0, // 倒计时间戳
			amount:0,
			timeData:{},
			order_sn:'',
			testorder_from:'',//测试来源
			from:'',//订单来源
			uid:0,
			user_info:[],
		}
	},
	onLoad: function(options) {
		this.from =options.from??'';
		this.order_sn =options.order_sn??'';
		this.testorder_from =options.testorder_from??'';
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.getOrderDetailFun();
		this.user_click();
	},
	methods: {
		pay_click(n){
			if(n==3 && Number(this.amount)>Number(this.user_info.user_money)){
				return;
			}
			if(n==2 && Number(this.amount)>Number(this.user_info.earnings)){
				return;
			}
			this.is_pay=n;
		},
		user_click(){
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'u-role_config',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.user_info=res.data.data;
				}
			});
		},
		onDownChange(e){
			this.timeData = e
		},
		countDownFinish(e) {
			this.timeout=0;
		},
		pay_post(){
			let paramsList = {
				uid:this.uid,
				order_sn:this.order_sn,
				pay_way:this.is_pay,
				from:this.from
			}
			let optsList = {
				url: 'p-prepay',
				method: 'post'
			};
			uni.showLoading({
				title: '调取支付中',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					if(_this.is_pay==3){
						uni.showToast({
							title:'支付成功',
							icon:'none',
							duration: 2000
						});
						uni.$emit("refreshorder")
						if(_this.from=='test'){
							if(_this.testorder_from==1){
								uni.redirectTo({
									url: '/pages/test_center/request-relation?order_sn=' + _this.order_sn
								})
							}else if(_this.testorder_from==2){
								uni.redirectTo({
									url: '/pages/test_center/wealth-after-pay?order_sn=' + _this.order_sn
								})
							} else{
								uni.redirectTo({
									url: '/pages/test_center/request?order_sn=' + _this.order_sn
								})
							}
						}else{
							uni.navigateBack();
						}
					}else if(_this.is_pay==2){
						uni.showToast({
							title:'支付成功',
							icon:'none',
							duration: 2000
						});
						uni.$emit("refreshorder")
						if(_this.from=='test'){
							if(_this.testorder_from==1){
								uni.redirectTo({
									url: '/pages/test_center/request-relation?order_sn=' + _this.order_sn
								})
							}else if(_this.testorder_from==2){
								uni.redirectTo({
									url: '/pages/test_center/wealth-after-pay?order_sn=' + _this.order_sn
								})
							} else{
								uni.redirectTo({
									url: '/pages/test_center/request?order_sn=' + _this.order_sn
								})
							}
						}else{
							uni.navigateBack();
						}
					}else if(_this.is_pay==1){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: String(res.data.data.timeStamp),
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: function (res) {
								uni.showToast({
									title:'支付成功',
									icon:'none',
									duration: 2000
								});
								uni.$emit("refreshorder")
								if(_this.from=='test'){
									if(_this.testorder_from==1){
										uni.redirectTo({
											url: '/pages/test_center/request-relation?order_sn=' + _this.order_sn
										})
									}else if(_this.testorder_from==2){
										uni.redirectTo({
											url: '/pages/test_center/wealth-after-pay?order_sn=' + _this.order_sn
										})
									} else{
										uni.redirectTo({
											url: '/pages/test_center/request?order_sn=' + _this.order_sn
										})
									}
								}else{
									uni.navigateBack();
								}
							},
							fail: function (err) {
								console.log(err);
								uni.showToast({
									title:'支付已取消',
									icon:'none',
									duration: 2000
								});
							}
						});
					}
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.redirectTo({
				url
			});
		},
		getOrderDetailFun(){
			let paramsList = {
				order_sn:this.order_sn,
				from:this.from
			}
			let optsList = {
				url: 'p-payway',
				method: 'get'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.orderDetail=res.data.data;
					_this.amount = _this.orderDetail.order_amount
					// 倒计时
					const startTimestamp = new Date().getTime() / 1000
					const endTimestamp = _this.orderDetail.cancel_time * 1
					_this.timeout = (endTimestamp - startTimestamp)*1000
				}else{
					setTimeout(() => uni.navigateBack(), 1500);
					return;
				}
				this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.order_details_a{
		width: 710rpx;
		height:auto;
		border-radius: 10rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 70rpx 0;
		overflow: hidden;
	}
	
	.order_details_a_a{
		font-size: 60rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}
	.order_details_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		margin-top: 27rpx;
		margin: auto;
	}
	.order_details_a_b_a{
		text-align: center;
	}
	.user_pay_b{
		width: 710rpx;
		margin: auto;
		padding: 29rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.user_pay_b_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 80rpx;
	}
	.user_pay_b_a{
		height: 134rpx;
		line-height: 134rpx;
		color:#fff;
		font-size: 28rpx;
		font-family: PingFangSC-regular;
		border-radius: 20rpx;
	}
	.user_pay_b_aa{
		// background: #F0F9F6;
	}
	.user_pay_b_a_a{
		float: left;
		background-position:25rpx;
		background-repeat: no-repeat;
		background-size: 60rpx;
		padding-left: 105rpx;
	}
	.user_pay_b_a_a_a{
		line-height: 40rpx;
		margin-top: 25rpx;
	}
	.user_pay_b_a_a_b{
		font-size: 24rpx;
		color: #ccc;
		line-height: 40rpx;
	}	
	.user_pay_b_a_b{
		width: 36rpx;
		height: 36rpx;
		float: right;
		border: 1rpx solid #CC8FBE;
		background-repeat: no-repeat;
		background-position:center;
		background-size: 21rpx 15rpx;
		border-radius: 50%;
		margin-top: 50rpx;
		margin-right: 35rpx;
	}
	.user_pay_b_a_bb{
		background-color:#CC8FBE;
	}
	.user_pay_c{
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
		padding: 20rpx;
	}
	.user_pay_c_a{
		width: 710rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 20rpx;
		color: #ffffff;
		font-size: 34rpx;
		font-family: PingFangSC-regular;
		text-align: center;
		background-color:#62469B;
	}
</style>
